<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="500px"
    :before-close="closeDialog"
  >
    <el-form
      ref="dataFormRef"
      v-loading="loading"
      :model="formData"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="字典名称" prop="name">
        <span v-if="props.type === 'update'">{{ formData.name }}</span>
        <el-input v-else v-model="formData.name" placeholder="请输入字典名称" />
      </el-form-item>
      <el-form-item label="字典编码" prop="code">
        <el-input v-model="formData.code" placeholder="请输入字典编码" />
      </el-form-item>
      <el-form-item label="父字典编码" prop="parentCode">
        <span v-if="props.parentCode">{{ props.parentCode }}</span>
        <el-input
          v-else
          v-model="formData.parentCode"
          placeholder="请输入父字典编码"
        />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number
          v-model="formData.sort"
          controls-position="right"
          :min="0"
        />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">停用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="formData.remark"
          type="textarea"
          placeholder="字典类型备注"
          :autosize="{ minRows: 2, maxRows: 4 }"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<!--字典类型-->
<script setup lang="ts">
import {
  getDictTypePage,
  getDictTypeForm,
  addDictType,
  updateDictType,
  deleteDictTypes
} from '@/api/dict'

import { DictTypePageVO, DictTypeQuery, DictTypeForm } from '@/api/dict/types'

defineOptions({
  name: 'DictType',
  inheritAttrs: false
})

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  id: {
    type: Number,
    default: 0
  },
  type: {
    type: String,
    // add-新增 update-更新
    default: 'add'
  },
  parentCode: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:visible', 'handleQuery'])
const dialogVisible = useVModel(props, 'visible', emit)

const dataFormRef = ref(ElForm)
const loading = ref(false)
const formData = reactive<DictTypeForm>({
  status: 1
})

// watch(
//   [() => props.id, () => props.parentCode],
//   ([newId, newParentCode], [oldId, oldParentCode]) => {
//     console.log([newId, newParentCode], [oldId, oldParentCode])
//     formData.id = newId
//     formData.parentCode = newParentCode
//   },
//   {
//     immediate: true
//   }
// )

watch(
  () => props.id,
  (nv, ov) => {
    if (nv) {
      console.log(nv)
      formData.id = nv
      loading.value = true
      getDictTypeForm(nv)
        .then(({ data }) => {
          Object.assign(formData, data)
        })
        .finally(() => (loading.value = false))
    }
  },
  {
    immediate: true
  }
)
watch(
  () => props.parentCode,
  (nv, ov) => {
    formData.parentCode = nv
  },
  {
    immediate: true
  }
)

const rules = reactive({
  name: [{ required: true, message: '请输入字典类型名称', trigger: 'blur' }],
  code: [{ required: true, message: '请输入字典类型编码', trigger: 'blur' }],
  sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
})

/** 字典类型表单提交 */
function handleSubmit() {
  dataFormRef.value.validate((isValid: boolean) => {
    if (isValid) {
      loading.value = true
      const dictTypeId = formData.id
      if (dictTypeId) {
        updateDictType(dictTypeId, formData)
          .then(() => {
            ElMessage.success('修改成功')
            closeDialog()
            emit('handleQuery')
          })
          .finally(() => (loading.value = false))
      } else {
        addDictType(formData)
          .then(() => {
            ElMessage.success('新增成功')
            closeDialog()
            emit('handleQuery')
          })
          .finally(() => (loading.value = false))
      }
    }
  })
}

/** 关闭字典类型弹窗 */
function closeDialog() {
  dialogVisible.value = false
  resetForm()
}

/**  重置字典类型表单 */
function resetForm() {
  dataFormRef.value.resetFields()
  dataFormRef.value.clearValidate()

  formData.id = undefined
  formData.status = 1
}

onMounted(() => {})
</script>
